<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
</head>
<style>
  div {
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 50px;
    top: 50px;
  }
</style>
<script>
  //隐藏盒子
  //$('div').hide() //写在dom加载完成之前不可以用hide()方法，因为元素还没加载进来，所以要等到元素加载完成之后才能隐藏
  //1.使用原生方式
  //$(document).ready(function () {
  //  $('div').hide() //写在dom加载完成之后就可以用hide()方法
  //})
  //2.使用简介方式
  $(function () {
    //jQurey的派他思想
    $('h1').click(function () {
      $(this).css('color', 'red').siblings().css('color', 'black')
    })
  })
</script>

<body>

  <h1>jQuery 基本使用</h1>
  <h1>jQuery 基本使用</h1>
  <h1>jQuery 基本使用</h1>
  <h1>jQuery 基本使用</h1>
  <h1>jQuery 基本使用</h1>
  <div></div>
</body>
<!--<script>
  //隐藏盒子
  $('div').hide()
</script>-->

</html>